<template>
  <van-cell-group>
    <van-field v-model="name" center label="昵称" maxlength="13">
      <van-button slot="button" size="small" type="primary" @click="notify">
        {{ $t("sureModify") }}
      </van-button>
    </van-field>
  </van-cell-group>
</template>

<script>
import { Cell, CellGroup, Field, Button } from 'vant';
import 'vant/lib/field/style/less';
import 'vant/lib/button/style/less';
export default {
    name: 'modify_nickname',
    props: ['nickname'],
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button
    },
    data () {
        return {
            name: this.nickname
        };
    },
    methods: {
        notify () {
            const datas = {
                params: {
                    nickname: this.name
                },
                id: this.$store.state.userInfo._id
            };
            this.$util.loadingToast();
            this.$api.userApi
                .updateUserInfo(datas)
                .then(res => {
                    if (res.code === 20000) {
                        this.$util.successToast();
                        this.$emit('updateNickname', this.name);
                        this.$router.go(-1);
                    } else {
                        throw new Error();
                    }
                })
                .catch(() => {
                    this.$util.failToast();
                });
        }
    }
};
</script>

<style scoped></style>
